<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link type="text/css" rel="stylesheet" href="css/style.css"/>
    </head>
    <body>
        <div class="warp">
            <div class="main">
                <header>
                    <h2 class="main-title"><a href="javascript:;" class="current">表单标题</a><a href="javascript:;" >表单标题2</a><a href="javascript:;" >表单标题3</a></h2>
                </header>
                <dl class="form-row">

                    <dt class="form-title">
                    <label class="form-title-label">输入框长度1<span class="red-tips">*</span></label>
                    </dt>
                    <dt class="form-text">
                    <input class="form-text-input input-leng1" type="text" placeholder="输入框长度1"  />
                    </dt>

                    <dt class="form-title">
                    <label class="form-title-label">输入框长度2</label>
                    </dt>
                    <dt class="form-text">
                    <input class="form-text-input input-leng2" type="text" placeholder="输入框长度2"  />
                    </dt>

                    <dt class="form-title">
                    <label class="form-title-label">输入框长度3</label>
                    </dt>
                    <dt class="form-text">
                    <input class="form-text-input input-leng3" type="text" placeholder="输入框长度3"  />
                    </dt>

                    <dt class="form-title">
                    <label class="form-title-label">输入框长度4</label>
                    </dt>
                    <dt class="form-text">
                    <input class="form-text-input input-leng4" type="text" placeholder="输入框长度4"  />
                    </dt>

                    <dt class="form-title">
                    <label class="form-title-label">输入框长度5</label>
                    </dt>
                    <dt class="form-text">
                    <input class="form-text-input input-leng5" type="text" placeholder="输入框长度5"  />
                    </dt>

                    <dt class="form-title">
                    <label class="form-title-label">多行输入框</label>
                    </dt>
                    <dt class="form-text">
                    <textarea class="form-textarea" placeholder="多行输入框"></textarea>
                    </dt>

                    <dt class="form-title">
                    <label class="form-title-label">单选下拉框</label>
                    </dt>
                    <dt class="form-text">
                    <select class="input-leng3">
                        <option>请选择</option>
                        <option>PESCMS</option>
                        <option>PESCMS</option>
                        <option>PESCMS</option>
                    </select>
                    </dt>

                    <dt class="form-title">
                    <label class="form-title-label">多选下拉框</label>
                    </dt>
                    <dt class="form-text">
                    <select class="form-select" multiple="multiple">
                        <option>请选择</option>
                        <option>PESCMS</option>
                        <option>PESCMS</option>
                        <option>PESCMS</option>
                        <option>PESCMS</option>
                        <option>PESCMS</option>
                        <option>PESCMS</option>
                        <option>PESCMS</option>
                        <option>PESCMS</option>
                        <option>PESCMS</option>
                    </select>
                    </dt>

                    <dt class="form-title">
                    <label class="form-title-label">单选按钮</label>
                    </dt>
                    <dt class="form-text">
                    <label class="form-radio-label">
                        <input class="form-radio" type="radio" name="radio" checked="checked" />
                        <span>
                            On
                        </span>
                    </label>
                    <label class="form-radio-label">
                        <input class="form-radio" type="radio" name="radio" />
                        <span>
                            Off
                        </span>
                    </label>
                    </dt>

                    <dt class="form-title">
                    <label class="form-title-label">复选按钮</label>
                    </dt>
                    <dt class="form-text">
                    <label class="form-checkbox-label">
                        <input class="form-checkbox" type="checkbox" name="checkbox" />
                        <span>
                            PHP
                        </span>
                    </label>
                    <label class="form-checkbox-label">
                        <input class="form-checkbox" type="checkbox" name="checkbox" />
                        <span>
                            JAVASCRIPT
                        </span>
                    </label>
                    </dt>

                    <dt class="form-title">
                    <label class="form-title-label">按钮列表</label>
                    </dt>
                    <dt class="form-text">
                    <input class="blue-button" type="submit" value="蓝色按钮"  />
                    <input class="red-button" type="submit" value="红色按钮"  />
                    <input class="yellow-button" type="submit" value="黄色按钮"  />
                    <input class="green-button" type="submit" value="绿色按钮"  />
                    <input class="white-button" type="submit" value="白色按钮"  />
                    </dt>
                </dl>
            </div>
        </div>
    </body>
</html>